<template>
	<div class="full-body" id="the_datasource">
		<div class="list">
			<md-list :md-expand-single="true">
				<md-list-item md-expand>
					<md-icon>
						<i class="iconfont icongongju"></i>
					</md-icon>
					<span class="md-list-item-text">{{getLangText(label.dataWay)}}</span>
					<div slot="md-expand" class="data-way-container" :style="{height:listHeight}">
						<span
							v-for="(item,idx) in dataType"
							:key="idx"
							@click="changeDataWay(idx)"
							class="data-way-span"
						>
							<md-button :class="[selectDataWay==idx?'md-primary':'','md-icon-button']">
								<md-icon>
									<i :class="['iconfont',item.icon]"></i>
								</md-icon>
							</md-button>
							<span :class="[selectDataWay==idx?'md-primary-text':'','md-body-1']">{{item.name}}</span>
						</span>

						<!-- 上传文件设置 start -->
						<div
							v-if="dataType[selectDataWay].name=='EXCEL'||dataType[selectDataWay].name=='CSV'||dataType[selectDataWay].name=='JSON'"
							style="text-align:center"
						>
							<md-field style="margin:8px;width:250px;" :class="[uploadError>0?'md-invalid':'']">
								<label style="white-space:nowrap;">
									<span v-show="uploadError==0">{{getLangText(label.upload)}}</span>

									<span
										v-show="uploadError>0"
									>{{uploadError==1?getLangText(label.nofile):(uploadError==2?getLangText(label.errorFile):'')}}</span>
								</label>

								<md-file v-model="uploadFile" @md-change="onUploadFile" />
							</md-field>

							<md-button class="md-raised md-primary" @click="onParseFile">{{getLangText(label.parse)}}</md-button>
						</div>
						<!-- 上传文件设置 end -->
						<!-- MySQL设置 start -->
						<div v-if="dataType[selectDataWay].name=='MySQL'" style="text-align:center;margin:0 8px;">
							<md-field>
								<label>{{getLangText(label.host)}}</label>
								<md-input v-model="mySQLSet.host"></md-input>
							</md-field>
							<md-field>
								<label>{{getLangText(label.port)}}</label>
								<md-input v-model="mySQLSet.port"></md-input>
							</md-field>

							<md-field>
								<label>{{getLangText(label.userName)}}</label>
								<md-input v-model="mySQLSet.user"></md-input>
							</md-field>
							<md-field>
								<label>{{getLangText(label.pwd)}}</label>
								<md-input v-model="mySQLSet.pwd"></md-input>
							</md-field>
							<md-field>
								<label>{{getLangText(label.database)}}</label>
								<md-input v-model="mySQLSet.database"></md-input>
							</md-field>
							<div class="md-body-1 row-item">
								<span>{{getLangText(label.query)}}:</span>
								<span>
									table
									<md-switch v-model="switchQuery" class="md-accent" style="margin:8px 16px;"></md-switch>SQL
								</span>
							</div>
							<md-field v-show="!switchQuery">
								<label>{{getLangText(label.table)}}</label>
								<md-input v-model="mySQLSet.table"></md-input>
							</md-field>

							<md-field v-show="switchQuery">
								<label>SQL</label>
								<md-textarea v-model="mySQLSet.sql"></md-textarea>
							</md-field>
							<md-button class="md-raised md-primary" @click="connectMySQL">{{getLangText(label.connect)}}</md-button>
						</div>
						<!-- MySQL设置 end -->
						<!-- 请求API设置 start -->
						<div v-if="dataType[selectDataWay].name=='URL'" style="text-align:center;padding:0 8px;">
							<md-field>
								<label>URL</label>
								<md-input v-model="urlSet.url"></md-input>
							</md-field>
							<div class="row-item" v-for="(item,idx) in urlSet.params" :key="idx">
								<span>
									<md-field>
										<label>{{getLangText(label.paramName)+(idx+1)}}</label>
										<md-input v-model="urlSet.params[idx].name"></md-input>
									</md-field>
								</span>

								<span style="flex:none;width:160px;">
									<md-field>
										<label>{{getLangText(label.paramValue)+(idx+1)}}</label>
										<md-input v-model="urlSet.params[idx].val"></md-input>
									</md-field>
								</span>
								<i class="iconfont iconshanchu" @click="delUrlParm(idx)"></i>
							</div>
							<div
								class="md-body-1"
								style="color:red;text-align:left;"
								v-if="isUrlRepeat"
							>{{getLangText(label.repeatParam)}}</div>
							<div style="text-align:center;">
								<md-button class="md-raised md-primary" @click="addUrlParam">{{getLangText(label.addParam)}}</md-button>
								<md-button class="md-raised md-accent" @click="doRequest">{{getLangText(label.request)}}</md-button>
							</div>
						</div>
						<!-- 请求API设置 end -->
						<!-- 自定义数据 start -->
						<div v-if="dataType[selectDataWay].name=='Custom'" style="text-align:center;padding:0 8px;">
							<div class="row-item" v-for="(item,idx) in customTable" :key="idx">
								<span>
									<md-field>
										<label>{{getLangText(label.paramName)+(idx+1)}}</label>
										<md-input v-model="customTable[idx].name" :disabled="isAddCustom"></md-input>
									</md-field>
								</span>

								<span style="flex:none;width:160px;">
									<md-field>
										<label>{{getLangText(label.paramValue)+(idx+1)}}</label>
										<md-input v-model="customTable[idx].val"></md-input>
									</md-field>
								</span>
								<i class="iconfont iconshanchu" @click="delCustomParm(idx)" v-if="!isAddCustom"></i>
							</div>
							<div
								class="md-body-1"
								style="color:red;text-align:left;"
								v-if="isCustomRepeat"
							>{{getLangText(label.repeatParam)}}</div>
							<div style="text-align:center;">
								<md-button
									class="md-raised md-primary"
									:disabled="isAddCustom"
									v-if="!isAddCustom"
									@click="addCustomParam"
								>{{getLangText(label.addParam)}}</md-button>
								<md-button
									class="md-raised md-primary"
									:disabled="!isAddCustom"
									v-if="isAddCustom"
									@click="resetCustomTable"
								>{{getLangText(label.resetParam)}}</md-button>
								<md-button
									class="md-raised md-accent"
									@click="addCustomTable"
								>{{getLangText(label.addTable)}}</md-button>
							</div>
						</div>
						<!-- 自定义数据 end -->
					</div>
				</md-list-item>

				<md-list-item md-expand v-if="dataList.length>0" :md-expanded.sync="isDataInfo">
					<md-icon>
						<i class="iconfont iconshuxing"></i>
					</md-icon>
					<span class="md-list-item-text">{{getLangText(label.dataAttributes)}}</span>
					<div slot="md-expand" class="list-content" :style="{height:listHeight}">						
						<md-field style="margin:0 8px;width:calc(100% - 16px)" v-if="packageSet.sourceId!=''">
							<label>{{getLangText(label.sourceId)}}</label>
							<md-input v-model="packageSet.sourceId" readonly></md-input>
						</md-field>
						<md-field style="margin:0 8px;width:calc(100% - 16px)">
							<label>{{getLangText(label.title)}}</label>
							<md-input v-model="packageSet.title" required  maxlength="100"></md-input>
						</md-field>
						<div class="md-body-1" v-if="!packageSet.title||packageSet.title.length<2" style="color:red;">{{getLangText(label.titleError)}}</div>
						<md-field style="margin:8px;width:calc(100% - 16px)">
							<label>{{getLangText(label.detail)}}</label>
							<md-textarea v-model="packageSet.detail" maxlength="300"></md-textarea>
						</md-field>
						<!-- 数据属性表格 start -->
						<div style="width:299px;overflow-x:auto;">
							<md-table
								md-fixed-header
								@md-selected="onAttrSelect"
								v-model="dataAttr"
								:md-selected-value="selectedAttrData"
								:md-height="300"
							>
								<md-table-row slot="md-table-row" slot-scope="{ index }" md-selectable="multiple">
									<md-table-cell :md-label="getLangText(label.code)">{{ dataAttr[index].code }}</md-table-cell>
									<md-table-cell :md-label="getLangText(label.name)">
										<input v-model="dataAttr[index].name" class="transparent-input" style="width:80px;" />
									</md-table-cell>
									<md-table-cell :md-label="getLangText(label.type)">
										<select
											v-model="dataAttr[index].type"
											:id="'attrType'+index"
											:name="'attrType'+index"
											class="transparent-input"
											style="width:80px;"
										>
											<option :value="it" v-for="it in types" :key="it">{{it}}</option>
										</select>
									</md-table-cell>
								</md-table-row>
							</md-table>
						</div>
						<!-- 数据属性表格 end -->
						<div style="text-align:center;">
							<md-button
								@click="updateTableType"
								class="md-raised md-primary"
							>{{getLangText(label.updateTable)}}</md-button>
						</div>
					</div>
				</md-list-item>

				<md-list-item md-expand v-if="dataList.length>0">
					<md-icon>
						<i class="iconfont iconjisuan"></i>
					</md-icon>
					<span class="md-list-item-text">{{getLangText(label.dataCalc)}}</span>
					<div slot="md-expand" class="list-content" :style="{height:listHeight}">
						<!-- 数据计算表格 start -->
						<div style="width:299px;overflow-x:auto;">
							<md-table
								md-fixed-header
								v-model="dataCalc"
								@md-selected="onCalcSelect"
								:md-selected-value="selectedCalcData" 
								
							>
								<md-table-row slot="md-table-row" slot-scope="{ index }" md-selectable="multiple">
									<md-table-cell :md-label="getLangText(label.name)">{{ dataAttr[index].name }}</md-table-cell>

									<md-table-cell :md-label="getLangText(label.type)">
										<select
											v-model="dataCalc[index].type"
											:id="'paramType'+index"
											:name="'paramType'+index"
											class="transparent-input"
											style="width:60px;"
										>
											<option :value="it.en" v-for="it in paramType" :key="it.en">{{getLangText(it)}}</option>
										</select>
									</md-table-cell>

									<md-table-cell :md-label="getLangText(label.calc)">
										<select
											v-model="dataCalc[index].calc"
											:id="'calcType'+index"
											:name="'calcType'+index"
											class="transparent-input"
											style="width:60px;"
										>
											<option :value="it.en" v-for="it in calcType" :key="it.en">{{getLangText(it)}}</option>
										</select>
									</md-table-cell>
								</md-table-row>
							</md-table>
							<div
								class="md-body-1"
								style="color:red;white-space: normal;padding:8px;"
								v-if="isCalcOver"
							>{{getLangText(label.calcOver)}}</div>
							<div
								class="md-body-1"
								style="color:red;white-space: normal;padding:8px;"
								v-if="isCalcParam"
							>{{getLangText(label.calcTip)}}</div>
							<div
								class="md-body-1"
								style="color:red;white-space: normal;padding:8px;"
								v-if="isCalcParam1"
							>{{getLangText(label.calcTip1)}}</div>

							<div style="text-align:center;">
								<md-button
									class="md-raised md-primary"
									@click="updateTableCalc"
									:disabled="isCalcOver"
								>{{getLangText(label.calc)}}</md-button>
							</div>
						</div>
						<!-- 数据计算表格 end -->
					</div>
				</md-list-item>
			</md-list>
		</div>
		<div class="list-body">
			<md-toolbar class="md-dense" md-elevation="0">
				<span class="md-title">
					{{getLangText(label.dataTable)}}
					<span
						class="md-body-1"
						style="margin-left:16px"
						v-if="dataList.length>0&&!isTableCalc"
					>{{getLangText(label.dataNum)+dataList.length}}</span>

					<span
						class="md-body-1"
						style="margin-left:16px"
						v-if="calcList.length>0&&isTableCalc"
					>{{getLangText(label.dataNum)+dataList.length}}</span>
				</span>

				<span class="md-toolbar-section-end" v-if="dataList.length>0">
					<span style="display: inline-flex;align-items: center;">
						{{getLangText(label.originData)}}
						<md-switch v-model="isTableCalc"></md-switch>
						{{getLangText(label.calcData)}}
					</span>

					<span @click="fullScreen" style="display:inline-flex;align-items:center;">
						<md-button class="md-icon-button" @keydown.esc="fullScreen">
							<i :class="['iconfont', isFullscreen?'icontuichuquanping':'iconquanping']"></i>
						</md-button>
						{{getLangText(isFullscreen?label.exitFullscreen:label.fullScreen)}}
					</span>

					<span
						@click="newDataTable"
						style="display: inline-flex;align-items: center;margin-left:16px;"
						v-if="packageSet.sourceId!=''"
					>
						<md-button class="md-icon-button">
							<i class="iconfont iconplus-creat"></i>
						</md-button>
						{{getLangText(label.create)}}
					</span>

					<span
						@click="updateDataTable"
						style="display: inline-flex;align-items: center;margin-left:16px;"
						v-if="packageSet.sourceId!=''"
					>
						<md-button class="md-icon-button">
							<i class="iconfont iconupdate"></i>
						</md-button>
						{{getLangText(label.update)}}
					</span>
					<span
						@click="saveDataTable"
						v-if="packageSet.sourceId==''"
						style="display: inline-flex;align-items: center;margin-left:16px;"
					>
						<md-button class="md-icon-button">
							<i class="iconfont iconsave"></i>
						</md-button>
						{{getLangText(label.save)}}
					</span>
					<span
						@click="exportDataTable"
						style="display: inline-flex;align-items: center;margin-left:16px;"
					>
						<md-button  class="md-icon-button">
							<i class="iconfont iconexport"></i>
						</md-button>
						{{getLangText(label.export)}}
					</span>
				</span>
			</md-toolbar>
			<!-- 原始数据表格 start -->
			<div
				id="dataList_table"
				style="width:100%;overflow-x:auto;overflow-y:hidden;height:calc(100% - 98px);"
				v-show="!isTableCalc"
			>				
				<data-table
					v-if="dataList.length>0"
					:lang-type="langType"
					:table-data="dataListShow"
					:table-title="selectedAttrData"
				></data-table>
				<div
					v-if="dataList.length==0"
					style="width:100%;overflow-x:auto;overflow-y:hidden;height:calc(100% - 48px);display:flex;align-items:center;justify-content:center;"
				>{{getLangText(label.nodata)}}</div>
			</div>
			<!-- 原始数据表格 end -->
			<!-- 计算结果表格 start -->
			<div
				id="calcList_table"
				style="width:100%;overflow-x:hidden;overflow-y:hidden;height:calc(100% - 48px);"
				v-show="isTableCalc"
			>				
				<data-table
					v-if="calcList.length>0"
					:lang-type="langType"
					:table-data="calcList"
					:table-title="calcAttr"
				></data-table>

				<div
					v-if="calcList.length==0"
					style="width:100%;overflow-x:auto;overflow-y:hidden;height:calc(100% - 48px);display:flex;align-items:center;justify-content:center;"
				>{{getLangText(label.nodata)}}</div>
			</div>
			<!-- 计算结果表格 end -->

			<!-- 分页器 -->
			<pager
				:lang-type="langType"
				:limit="pagerLimit"
				:total="pagerTotal"
				:current="pagerCurrent"
				@pager-limit="onPagerLimit"
				@pager-current="onPagerCurrent"
				v-if="dataList.length>0&&!isTableCalc"
			></pager>
		</div>


		<md-dialog-alert
      :md-active.sync="isAlert"
      :md-content="alertTip"
      md-confirm-text="OK" />
	</div>
</template>
<script src="@/components/js/dataSource.js">
</script>
<style lang="scss" scoped>
	#the_datasource {
		display: flex;
		flex-direction: row;
		background: white;
	}
	.list {
		display: inline-flex;
		width: 300px;
		height: 100%;
		overflow-y: auto;
		border-right: solid 1px rgba(0, 0, 0, 0.12);
	}
	.list-body {
		display: inline-flex;
		width: calc(100% - 300px);
		height: 100%;
		flex-direction: column;
	}
	.list-content {
		display: flex;
		flex-direction: column;
	}
	.md-list {
		padding: 0;
	}
	.row-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 48px;
		> span {
			display: inline-flex;
			flex-direction: row;
			align-items: center;
		}
		> span:nth-child(1) {
			width: 50px;
		}
		> span:nth-child(2) {
			flex: 1;
			padding-left: 8px;
			justify-content: center;
		}
	}
	.data-way-container {
		white-space: normal;
		padding: 8px;
	}
	.data-way-span {
		cursor: pointer;
		width: 33.3%;
		display: inline-flex;
		align-items: center;
		flex-direction: column;
	}
	#dataList_table .md-table-content.md-scrollbar {
		height: calc(100% - 57px);
	}
</style>

